<template>
  <div class="audit-logs">
    <div class="filter-box">
      <div class="filter-form">
        <el-form size="small" label-width="90px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="开始时间">
                <el-date-picker @change="dateChange(1)" style="width: 100%" v-model="formData.createTimeStart"
                  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择开始时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束时间">
                <el-date-picker v-model="formData.createTimeEnd" @change="dateChange(2)" style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择结束时间"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件类型">
                <el-select v-model="formData.eventType" style="width: 100%">
                  <el-option v-for="(item, index) in sjlxArr" :key="'sjlx' + index" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户名">
                <el-input maxlength="100" placeholder="请输入" clearable v-model="formData.userName" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日志来源">
                <el-select v-model="formData.logSource" style="width: 100%">
                  <el-option v-for="(item, index) in rzlyArr" :key="'rzly' + index" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日志类型">
                <el-select v-model="formData.logType" style="width: 100%">
                  <el-option v-for="(item, index) in rzlxArr" :key="'rzlx' + index" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日志类别">
                <el-select v-model="formData.type" style="width: 100%">
                  <el-option v-for="(item, index) in rzlbArr" :key="'rzlb' + index" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="风险等级">
                <el-select v-model="formData.riskLevel" style="width: 100%">
                  <el-option v-for="(item, index) in fxdjArr" :key="'fxdj' + index" :label="item.name"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="query" size="mini">查询</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="log-table">
      <div class="lsd-table">
        <el-table :data="tableData" border :header-cell-style="{ 'background-color': '#B1C8F9', 'font-size': '14px', 'color': '#000' }"
           height="100%"
          style="width: 100%">
          <el-table-column fixed align="center" width="55" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column :min-width="item.width" align="center" :label="item.label" :prop="item.prop" :fixed="item.fixed"
            show-overflow-tooltip v-for="(item,index) of logColums" :key="index" :formatter="formatter"></el-table-column>
        </el-table>
      </div>
      <div class="lsd-pagination">
        <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page="formData.pageNum"
          :page-size="formData.pageSize" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
          :total="formData.total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { logTypes, getPageAuditLog } from "@/api/SystemConfig/auditlog";
import { parseStamp } from "../../../utils/public";
export default {
  data() {
    return {
      formData: {
        pageNum: 1,
        pageSize: 10,
        userName: "",
        total: 0
      },
      form: {},
      tableData: [],
      rzlyArr: [
        { value: "1", name: "web" },
        { value: "2", name: "app" }
      ],
      rzlxArr: [
        { value: "1", name: "业务" },
        { value: "2", name: "系统" }
      ],
      rzlbArr: [
        { value: "1", name: "访问日志" },
        { value: "2", name: "异常日志" },
        { value: "3", name: "登录日志" }
      ],
      fxdjArr: [
        { value: "1", name: "低" },
        { value: "3", name: "高" }
      ],
      sjlxArr: [],
      sjlxObj: {},
      logColums: [
        {
          prop: "userName",
          label: "用户名",
          fixed: true,
          width: "120"
        },
        {
          prop: "realName",
          label: "姓名",
          fixed: true,
          width: "140"
        },
        {
          prop: "clientIp",
          label: "客户端IP",
          width: "180"
        },
        {
          prop: "moduleName",
          label: "功能模块名",
          width: "200"
        },
        {
          prop: "exInfo",
          label: "异常描述",
          width: "100"
        },
        {
          prop: "riskLevel",
          label: "风险等级",
          width: "100"
        },
        {
          prop: "reqInfo",
          label: "日志内容",
          width: "300"
        },
        {
          prop: "eventType",
          label: "事件类型",
          width: "100"
        },
        {
          prop: "logType",
          label: "日志类型",
          width: "100"
        },
        {
          prop: "type",
          label: "日志类别",
          width: "150"
        },
        {
          prop: "resultCode",
          label: "日志结果",
          width: "150"
        },
        {
          prop: "logSource",
          label: "日志来源",
          width: "150"
        },
        {
          prop: "createTime",
          label: "时间",
          width: "200"
        }
      ]
    };
  },
  created() {
    logTypes().then(res => {
      this.sjlxArr = res || [];
      this.sjlxArr.forEach(el => {
        this.sjlxObj[el.value] = el.name;
      });
      this.getLogList();
    });
  },
  mounted() {
  },
  methods: {
    formatter(row, column) {
      if (column.property === "riskLevel") {
        const fxdjObj = { "1": "低", "3": "高"};
        return row.riskLevel ? fxdjObj[row.riskLevel] : "-";
      } else if (column.property === "eventType") {
        return row.eventType ? this.sjlxObj[row.eventType] : "-";
      } else if (column.property === "logType") {
        const rzlxObj = { "1": "业务", "2": "系统"};
        return row.logType ? rzlxObj[row.logType] : "-";
      } else if (column.property === "type") {
        const rzlxObj = { "1": "访问日志", "2": "异常日志", "3": "登录日志"};
        return row.type ? rzlxObj[row.type] : "-";
      } else if (column.property === "resultCode") {
        const rzlxObj = ["异常", "成功"];
        return row.resultCode ? rzlxObj[row.resultCode] : "-";
      } else if (column.property === "logSource") {
        const rzlxObj = { "1": "web", "2": "app"};
        return row.logSource ? rzlxObj[row.logSource] : "-";
      } else if (column.property === "createTime") {
        return parseStamp(row.createTime);
      } else {
        return row[column.property];
      }
    },
    getLogList() {
      const params = JSON.parse(JSON.stringify(this.formData));
      if (params.createTimeStart) params.createTimeStart = +new Date(params.createTimeStart);
      if (params.createTimeEnd) params.createTimeEnd = +new Date(params.createTimeEnd);
      getPageAuditLog(params).then(res => {
        this.tableData = res.data;
        this.formData.total = res.total;
      });
    },
    dateChange(i) {
      if (this.formData.createTimeStart && this.formData.createTimeEnd) {
        const start = +new Date(this.formData.createTimeStart);
        const end = +new Date(this.formData.createTimeEnd);
        if (start > end) {
          this.$notify({
            type: "warning",
            title: "提示",
            message: "开始时间不能大于结束时间！"
          });
          if (i === 1) this.formData.createTimeStart = "";
          if (i === 2) this.formData.createTimeEnd = "";
        }
      }
    },
    onSizeChange(pageSize) {
      this.formData.pageSize = pageSize;
      this.getLogList();
    },
    onCurrentChange(currentPage) {
      this.formData.pageNum = currentPage;
      this.getLogList();
    },
    reset() {
      this.formData = {
        pageNum: 1,
        pageSize: 10,
        userName: "",
        total: 0
      };
      this.getLogList();
    },
    query() {
      this.formData.pageNum = 1;
      this.formData.total = 0;
      this.getLogList();
    }
  }
};
</script>
<style lang="less" scoped>
.audit-logs {
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter-box {
    display: flex;

    .filter-form {
      flex: 1;
    }

    .btnBox {
      width: 200px;
      text-align: right;
    }
  }
  .lsd-pagination {
    text-align: right;
  }
  .log-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    .lsd-table {
      flex: 1;
    }
  }
}
</style>
